<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../area.js"></script>
</head>

<body>
    <div>
        <select id="pro">
            <!-- <option value="">111</option>
            <option value="">222</option>
            <option value="">333</option> -->
        </select>
        <select id="city">
            <!-- <option value="">111</option>
            <option value="">222</option>
            <option value="">333</option> -->
        </select>
        <select id="area">
            <!-- <option value="">111</option>
            <option value="">222</option>
            <option value="">333</option> -->
        </select>
    </div>
    <script>
        var pro = document.querySelector('#pro');
        var city = document.querySelector('#city');
        var area = document.querySelector('#area');
        var index = 0;
        var index2 = 0;
        // 默认省选项
        for (let i = 0; i < place.data.length; i++) {
            console.log(place.data.length);
            pro.innerHTML += `<option value="">${place.data[i].provname}</option>`
        }
        // 默认市选项
        for (let i = 0; i < place.data[index].city.length; i++) {                
                city.innerHTML += `<option value="">${place.data[index].city[i].cityname}</option>`
            }
        console.log(place);
        // // 默认区选项
        for (let i = 0; i < place.data[index].city[index2].dist.length; i++) {
                    area.innerHTML += `<option value="">${place.data[index].city[index2].dist[i]}</option>`
                    // console.log(place.data[index].city[index2].dist[i]);
                }
        // 获取.pro的选择.所对应的城市的数组
        pro.addEventListener('change', function () {
            // 清空省渲染
            city.innerHTML = '';
            // selectedIndex获取当前下拉框对象内选中option的索引值
            index = pro.selectedIndex;
            //   console.log(pro.selectedIndex);
            // 循环这个数组 ,得到数组的的所有对象
            for (let i = 0; i < place.data[index].city.length; i++) {
                
                city.innerHTML += `<option value="">${place.data[index].city[i].cityname}</option>`
            } 
            // console.log(place.data[index].city[i].cityname);
            area.innerHTML = '';
        })
        city.addEventListener('change', function () {
            // 清空市渲染\
            area.innerHTML = '';
                // console.log(city.selectedIndex);
                // selectedIndex获取当前下拉框对象内选中option的索引值
                index2 = city.selectedIndex;
                // 循环这个数组 ,得到数组的的所有对象
                for (let i = 0; i < place.data[index].city[index2].dist.length; i++) {
                    area.innerHTML += `<option value="">${place.data[index].city[index2].dist[i]}</option>`
                    // console.log(place.data[index].city[index2].dist[i]);
                }
            })
    </script>
</body>

</html>